In this post, will show you Student Profile Create and Browse profile after login using store procedure, Jquery & AngularJS in ASP.NET MVC.

Step-1:  Create StudentProfileController Controller.

Go to Solution Explorer > Controllers Folder > StudentProfileController > Create Marks() ActionResult with writing the below code.

        public ActionResult Marks()
        {
            return View();
        }

Select Marks and create the Page.

Step-2: In this page add these below Links.

<!-- Font Awesome -->
    <link rel="stylesheet" href="~/Content/plugins/fontawesome-free/css/all.min.css">

    <!-- Ionicons -->

    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

    <!-- Tempusdominus Bbootstrap 4 -->

    <link rel="stylesheet" href="~/Content/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">

    <!-- iCheck -->

    <link rel="stylesheet" href="~/Content/plugins/icheck-bootstrap/icheck-bootstrap.min.css">

    <!-- JQVMap -->

    <link rel="stylesheet" href="~/Content/plugins/jqvmap/jqvmap.min.css">

    <!-- Theme style -->

    <link rel="stylesheet" href="~/Content/dist/css/adminlte.min.css">

    <!-- overlayScrollbars -->

    <link rel="stylesheet" href="~/Content/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">

    <!-- Daterange picker -->

    <link rel="stylesheet" href="~/Content/plugins/daterangepicker/daterangepicker.css">

    <!-- summernote -->

    <link rel="stylesheet" href="~/Content/plugins/summernote/summernote-bs4.css">

    <!-- Google Font: Source Sans Pro -->

    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">


    <!-- Select2 -->

    <link rel="stylesheet" href="~/Content/plugins/select2/css/select2.min.css">

    <link rel="stylesheet" href="~/Content/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="../Content/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- AdminLTE App -->

    <script src="../Content/dist/js/adminlte.min.js"></script>


    <script src="../Scripts/angular.min.js"></script>

    <!-- ChartJS -->

    <script src="../Content/plugins/chart.js/Chart.min.js"></script>

    <!-- Sparkline -->

    <script src="../Content/plugins/sparklines/sparkline.js"></script>

    <!-- JQVMap -->

    <script src="../Content/plugins/jqvmap/jquery.vmap.min.js"></script>

    <script src="../Content/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>

    <!-- jQuery Knob Chart -->

    <script src="../Content/plugins/jquery-knob/jquery.knob.min.js"></script>

    <!-- daterangepicker -->

    <script src="../Content/plugins/moment/moment.min.js"></script>

    <script src="../Content/plugins/daterangepicker/daterangepicker.js"></script>

    <!-- Tempusdominus Bootstrap 4 -->

    <script src="../Content/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>

    <!-- Summernote -->

    <script src="../Content/plugins/summernote/summernote-bs4.min.js"></script>

    <!-- overlayScrollbars -->

    <script src="../Content/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>

    <!-- AdminLTE App -->

Step-3: Now we need login page when a student click login button then direct to Student Profile Page.

Go to Solution Explorer > Controller Folder > JsonResult GetLoginInfo() modify that’s are given below  

        public JsonResult GetLoginInfo(UserDAO dao)

        {

            DataTable dt = aDal.LoadAllDataDAL(dao);

            string mes = "";

            if (dt.Rows.Count > 0)

            {

                if(dt.Rows[0]["usertype"].ToString()== "Admin")

                {

                    Session["LoginName"] = dao.LoginName;

                    mes = "Admin";

                    //RedirectToAction("Index", "Home");

                }

                else

                {

                    Session["StuId"] =  dt.Rows[0]["StudentId"].ToString();

                    Session["LoginName"] = dao.LoginName;

                    mes = "Student";

                    //RedirectToAction("Marks", "StudentProfile");

                }

              //  mes = "Login Successfully";

            }

            else

            {

                mes = "Login Faild";

            }

            return Json(mes, JsonRequestBehavior.AllowGet);

        }

Step-4: HomeControllerJS.js Modify scripts.

Go to Solution Explorer > Scripts Folder >  AngularController Folder > HomeControllerJS.js with writing the Highlight code.

var MyApp = angular.module("ABCApp", []);


MyApp.controller("HomeController", function ($scope, $http) {

    $scope.btnLogin = "Sign In";


    $scope.LoginData = function () {



        $scope.btnLogin = "Signing.....";

        $http({

            method: 'POST',

            url: '/Home/GetLoginInfo',

            data: $scope.UserDAO

        }).success(function (a) {


            if (a == 'Admin') {

                window.location.href = "Index";

            }


            if (a == 'Student') {

                window.location.href = "../StudentProfile/Marks";

            }

          /*  window.location.href = "Index"*/

        }).error(function () {


            $scope.btnLogin = "Sign In";

            $scope.UserDAO = null;

            alert("Faild to Login");


        });

    };

});

Step-5: add  codes in Marks Page.

Go to Solution Explorer > Views Folder > StudentProfile Folder > Marks Page with writing the below code.

<div ng-app="ABCApp" ng-controller="StudentCourseOfferController">
        <section class="content">
            <!-- Default box -->

            <div class="card">

                <div class="card-body row">

                    <div class="col-5 text-center d-flex align-items-center justify-content-center">

                        <div class="">

                            <h1>Student Info</h1>

                            <hr />

                            <h2> Student ID: <label id="StudentIdNo"></label></h2>

                            <h2>Student Name:  <label id="StudentName"></label></h2>

                            <a href="../Home/LoginPage" >Log Out</a>
                        </div>
</div>

Step-6:  In StudentProfileController Controller add GetStudentInfo().

Go to Solution Explorer > Controllers Folder > StudentProfileController with writing the below code.

        public ActionResult GetStudentInfo()
 
        {
            string prm = Session["StuId"].ToString();

            DataTable dr = aDal.GetStudentInfoDAL(prm);

            string jJSONresult;

            jJSONresult = JsonConvert.SerializeObject(dr);

            return Json(jJSONresult, JsonRequestBehavior.AllowGet);

        }

Step-7:  Create StudentProfileDAL class.

Go to Solution Explorer > DAL Folder > Create StudentProfileDAL class> and writing the below code.

SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConStr"].ConnectionString);

        public DataTable GetStudentInfoDAL(string prm)
        {
            SqlCommand com = new SqlCommand("sp_GET_StudentInfoByStuId", conn);

            com.CommandType = CommandType.StoredProcedure;

            com.Parameters.AddWithValue("@prm", prm);

            SqlDataAdapter da = new SqlDataAdapter(com);

            DataTable dss = new DataTable();

            da.Fill(dss);

            return dss;

        }

Step-8: Create store Procedure for Load Student Profile Info.

Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_GET_StudentInfoByStuId with writing the below code.

create proc [dbo].[sp_GET_StudentInfoByStuId]

@prm nvarchar(max)

as

begin

Declare @Query nvarchar(max)

 set @Query ='select b.BatchName+  StudentIdNO as StudentIdNO, s.StudentName from tblStudent s

left join tblBatch b on b.BatchId=s.BatchId

where s.StudentId='+@prm

end

exec(@Query)

Step-9: In this Marks page add function GetList() writing the below code.

    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/AngularController/StudentCourseOfferJS.js"></script>

    <script>
    GetList();
  function GetList() {
          var urlPath = '@Url.Action("GetStudentInfo", "StudentProfile")';
        $.ajax({

            url: urlPath,

            dataType: 'json',

            type: "Get",

            async: true,

            success: function (data) {

                var result = JSON.parse(data);

                $("#StudentIdNo").html(result[0].StudentIdNO);

                $("#StudentName").html(result[0].StudentName);

                    },
            error: function (data) {

                alert("Operation Faild!!");
            }
        })
        }

Step-10: Run Application.